<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                    user-scalable=no, 
                    initial-scale=1.0,
                    maximum-scale=1.0, 
                    minimum-scale=1.0"/>
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="css/chapter4.css"/>
</head>
<body>
    <!-- <pre>
        视口单位：
        vw：可视窗口的宽度单位，1vw = 可视窗口的宽度的百分之一
        vh：可视窗口的高度单位，1vh = 可视窗口的高度的百分之一
        强调：针对视口的百分比！

        CSS的高级应用：
            语法：
                --变量名:变量值
            使用：
                val(--变量名)
                在属性值的位置
            功能：
            CSS中可以定义变量，在后续样式中使用变量代替属性值
            CSS中变量也有作用域，使用范围由选择器决定。语法写在样式表的{}内。
            
    </pre> -->
    <div id="div1">

    </div>

    <div id="div2">
        <p></p>
    </div>
    <div id="div3">
        div3
        <div id="div4">
            div4
        </div>
    </div>
    <script type="text/javascript" src="js/rem.js"></script>
    <script type="text/javascript" src="js/chapter4.js"></script>
</body>
</html>